<template>
  <div class="xg-lhc" v-if="!getIsPhone">
    <select-number-public
      :options="options"
      :winningInfo="winningInfo"
      :winningNumbers="winningNumbers"
      :currentLottery="getLotteryType.lotteryName"
      @mutate="handleMutate"
    >
      <template v-slot:winninginfo>
        <winning-numbers :winningNumbers="winningNumbers">
          <winning-info-lhc :winningNumbers="winningNumbers"></winning-info-lhc>
        </winning-numbers>
      </template>
      <transition name="fade" mode="out-in">
        <component :is="getCurrentComponent" class="number-select-main"></component>
      </transition>
    </select-number-public>
  </div>
  <div v-else class="xg-lhc-phone">
    <div class="fixed-top">
      <winning-numbers :winningNumbers="winningNumbers">
        <div class="numbers">
          <span 
            class="border-right" 
            v-for="(number, index) in winningNumbers.previous.numbers.split(',')"
            :key="index"
            :class="addClass(number)"
          >{{number}}</span>
          <span class="eq border-right">
            =
          </span>
          <span class="sum border-right">
            {{sum(winningNumbers.previous.numbers.split(','))}}
          </span>
        </div>
      </winning-numbers>
      <sub-dropdown-phone></sub-dropdown-phone>
    </div>
    <transition name="fade" mode="out-in">
      <component :is="getCurrentComponent"></component>
    </transition>
    <side-slider-phone :options="options" @click="handleMutate"></side-slider-phone>
  </div>
</template>

<script>
import SelectNumberPublic from '@/components/select-number-public/select-number-public'
import WinningNumbers from '@/components/winning-numbers/winning-numbers'
import WinningInfoLhc from '@/components/winning-info/winning-info-lhc'
import tema from '@/components/lottery-type/liuhecai/tema/tema'
import zhengma from '@/components/lottery-type/liuhecai/zhengtema/zhengma'
import zhengma1 from '@/components/lottery-type/liuhecai/zhengtema/zhengma1'
import TemaSebo from '@/components/lottery-type/liuhecai/tema-sebo/tema-sebo'
import texiao from '@/components/lottery-type/liuhecai/shengxiao/texiao'
import liuxiao from '@/components/lottery-type/liuhecai/shengxiao/liuxiao'
import weishu from '@/components/lottery-type/liuhecai/weishu/weishu'
import wubuzhong from '@/components/lottery-type/liuhecai/buzhong/wubuzhong'
import zongfen from '@/components/lottery-type/liuhecai/zongfen/zongfen'
import SideSliderPhone from '@/components/base/phone/side-slider-phone/side-slider-phone'
import SubDropdownPhone from '@/components/base/phone/sub-dropdown-phone/sub-dropdown-phone'

import { sumArr } from '@/assets/js/util'
import { mapGetters, mapMutations } from 'vuex'

const red = [1,2,7,8,12,13,18,19,23,24,29,30,34,35,40,45,46]
const green = [5,6,11,16,17,21,22,27,28,32,33,38,39,43,44,49]
const blue = [3,4,9,10,14,15,20,25,26,31,36,37,41,42,47,48]

export default {
  components: {
    SelectNumberPublic,
    WinningNumbers,
    WinningInfoLhc,
    tema,
    zhengma,
    zhengma1,
    TemaSebo,
    texiao,
    liuxiao,
    weishu,
    wubuzhong,
    zongfen,
    SideSliderPhone,
    SubDropdownPhone,
    
  },
  data() {
    return {
      // 开奖信息
      winningNumbers: {
        id: 'xglhc',
        lotteryName: '香港六合彩',
        dateNo: '888888',
        previous: {
          dataNo: '888887',
          numbers: '1,30,24,25,22,31',
          context: '龙,虎,单,双,全'
        },
        closeTime: new Date().getTime() + 1000000,
        drawTime: new Date().getTime() + 10000000
      },
      // 上期中奖信息
      winningInfo: [
        { 
          id: 1,
          series: 819049,
          numbers: '7,8,23,24,11,15,45'
        },
        {
          id: 2,
          series: 819049,
          numbers: '7,8,23,24,11,15,45'
        },
        {
          id: 3,
          series: 819049,
          numbers: '7,8,23,24,11,15,45'
        },
        {
          id: 4,
          series: 819049,
          numbers: '7,8,23,24,11,15,45'
        },
        {
          id: 5,
          series: 819049,
          numbers: '7,8,23,24,11,15,45'
        },
      ],
      // tab选项
      options: [
        {
          id: 'tema',
          context: '特码',
          currentComponent: 'tema',
          currentSubTab: '特码',
          currentSubId: 'tema',
          sub: [
             {
              cate: '玩法',
              tabnames: [
                {
                  id: 'tema',
                  context: '特码',
                  components: 'tema'
                },
              ]
            }
          ]
        },
        {
          id: 'z_tema',
          context: '正码特',
          currentSubId: 'z_m',
          currentComponent: 'zhengma',
          currentSub: '正码',
          sub: [
            {
              cate: '玩法',
              tabnames: [
                {
                  id: 'z_m',
                  context: '正码',
                  components: 'zhengma'
                },
                {
                  id: 'z_m_1',
                  context: '正码1',
                  components: 'zhengma1',
                },
                {
                  id: 'z_m_2',
                  context: '正码2',
                  components: ''
                }
              ]
            }
          ]
        },
        {
          id: 'tm_sb',
          context: '特码色波',
          currentSubId: 'tm_sb',
          currentComponent: 'tema-sebo',
          currentSubTab: '特码色波',
          sub: [
             {
              cate: '玩法',
              tabnames: [
                {
                  id: 'tm_sb',
                  context: '特码色波',
                  components: 'tema-sebo'
                },
              ]
            }
          ]
        },
        {
          id: 's_x',
          context: '生肖',
          currentSubId: 't_x',
          currentComponent: 'texiao',
          currentSubTab: '特肖',
          sub: [
            {
              cate: '玩法',
              tabnames: [
                {
                  id: 't_x',
                  context: '特肖',
                  components: 'texiao',
                },
                {
                  id: 'y_x',
                  context: '一肖',
                  components: '',
                },
                {
                  id: 'l_x',
                  context: '六肖',
                  components: 'liuxiao',
                },
              ]
            },
          ],
        },
        {
          id: 'w_s',
          context: '尾数',
          currentSubId: 'w_s',
          currentComponent: 'weishu',
          currentSubTab: '尾数',
          sub: [
             {
              cate: '玩法',
              tabnames: [
                {
                  id: 'w_s',
                  context: '尾数',
                  components: 'weishu'
                },
              ]
            }
          ]
        },
        {
          id: 'b_z',
          context: '不中',
          currentSubId: 'w_b_z',
          currentComponent: 'wubuzhong',
          currentSubTab: '五不中',
          sub: [
            {
              cate: '玩法',
              tabnames: [
                {
                  id: 'w_b_z',
                  context: '五不中',
                  components: 'wubuzhong',
                },
                {
                  id: 'l_b_z',
                  context: '六不中',
                  components: '',
                },
                {
                  id: 'q_b_z',
                  context: '七不中',
                  components: '',
                },
              ]
            },
          ],
        },
        {
          id: 'z_f',
          context: '总分',
          currentSubId: 'z_f',
          currentComponent: 'zongfen',
          currentSubTab: '总分',
          sub: [
            {
              cate: '玩法',
              tabnames: [
                {
                  id: 'z_f',
                  context: '总分',
                  components: 'zongfen',
                }
              ]
            },
          ],
        },
      ]
    }
  },
  created() {
    this.setLotteryType({lotteryName: this.winningNumbers.lotteryName, id: this.winningNumbers.id})
    this.setCurrentLotteryDateNo(this.winningNumbers.dateNo)
    this.setCurrentSubId(this.options[0].currentSubId)
    this.setCurrentComponent(this.options[0].currentComponent)
    this.setCurrentMainTab({mainTabName: this.options[0].context, id: this.options[0].id })
    this.setCurrentTab({subTabName: this.options[0].currentSubTab, id: this.options[0].currentSubId})
  },
  methods: {
    handleMutate(options) {
      this.options = options
    },
    sum(arr) {
      return sumArr(arr)
    },
    addClass(number) {
      let num = parseInt(number)
      let className = ''
      if (red.indexOf(num) > -1) {
        className = 'red'  
      } else if (green.indexOf(num) > -1) {
        className = 'green'
      } else if(blue.indexOf(num) > -1) {
        className = 'blue'
      } else {
        className = ''
      }
      return className
    },
    ...mapMutations('lottery', {
      setLotteryType: 'SET_LOTTERY_TYPE',
      setCurrentComponent: 'SET_CURRENT_COMPONENT',
      setCurrentMainTab: 'SET_CURRENT_MAIN_TAB',
      setCurrentTab: 'SET_CURRENT_TAB',
      setCurrentLotteryDateNo: 'SET_CURRENT_LOTTERY_DATE_NO',
      setCurrentSubId: 'SET_CURRENT_SUB_ID'
    })
  },
  computed: {
    ...mapGetters('lottery', [
      'getCurrentComponent',
      'getIsPhone',
      'getLotteryType'
    ])
  }
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/styles/variables.styl'
  &.fade-enter, &.fade-leave-to 
    opacity 0
  &.fade-leave, &.fade-enter-to 
    opacity 1
  &.fade-enter-active, &.fade-leave-active 
    transition all 0.2s 
  .xg-lhc-phone
    width 100%
    box-sizing border-box
    padding-top 148px
    .fixed-top 
      position fixed 
      top 48px 
      left 0 
      right 0 
      z-index 9
      background #fff
      .numbers 
        font-size 0
        span  
          display inline-block
          width 25px
          height 10px
          line-height 10px
          text-align center
          font-size 16px 
          font-weight 700
          font-family $sub-font-family
          &.red 
            color $color-ball-red 
          &.green 
            color $color-ball-green 
          &.blue 
            color $color-ball-blue
          &.sum 
            min-width 40px 
  
</style>